import { useSettingStore } from "@/stores/settings"
import { generateColors, setColors } from "@/utils/color"

export const useGenerateTheme = () => {
  // 第一步，监控主题的变化，跟新到store中
  // 第二步，生成主题更新
  const store = useSettingStore()
  const theme = computed(() => store.settings.theme)
  const originalTheme = computed(() => store.settings.originalTheme)
  // 监听主题变化，
  watchEffect(() => {
    // 设置的主题和原来的不一致，
    if (theme.value !== originalTheme.value) {
      const colors = {
        primary: theme.value, // 设置 priamry 的颜色
        ...generateColors(theme.value) // 设置  primary-light-1/9 的颜色
      }
      // 设置颜色
      setColors(colors)
      // 把 originalTheme 持久化存储
      store.changeSetting({ key: "originalTheme", value: theme.value })
    }
  })
  // 目的就是生成主体应用在根元素上
}
